/*
 * @Author: kanglang
 * @Date: 2021-01-22 15:13:35
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-03-31 14:39:47
 * @Description: 车辆详情-司机信息条目
 */
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import {
  px2dp,
  splitLineColorLightGray,
  fontColorCoffee,
} from '@/styles';

const CarInfoCell = ({
  isBorder = true,
  label,
  value,
  submitDriver,
  isDriverBan, // zeki-3.0.4 添加司机封禁
}) => {
  const setHandle = () => {
    submitDriver && submitDriver();
  };

  return (
    <View style={[styles.box, isBorder && styles.border]}>
      <View style={styles.items}>
        <Text style={[styles.mr32, styles.fontSizeGray14]}>{label}</Text>
        <Text
          style={[styles.fontSize14, value == '暂无司机' && styles.valueStyle]}
        >
          {value}
        </Text>
        {isDriverBan ? (
          <View style={styles.banStyle}>
            <Text style={styles.banTextStyle}>封禁中</Text>
          </View>
        ) : null}
      </View>
      {value && value != '暂无司机' ? (
        <TouchableOpacity
          activeOpacity={1}
          style={styles.btnTextBox}
          onPress={() => setHandle()}
        >
          <Text style={styles.btnText}>更换司机&gt;</Text>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity
          activeOpacity={1}
          style={{
            marginRight: px2dp(32) * 2,
            justifyContent: 'center',
            alignItems: 'center',
          }}
          onPress={() => setHandle()}
        >
          <View style={styles.boxStyle}>
            <Text style={styles.btnTextStyle}>设置司机</Text>
          </View>
        </TouchableOpacity>
      )}
    </View>
  );
};
export default CarInfoCell;
const styles = StyleSheet.create({
  box: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    alignItems: 'center',
    marginLeft: px2dp(16) * 2,
  },
  border: {
    borderBottomWidth: px2dp(1) * 2,
    borderColor: splitLineColorLightGray,
  },

  mr32: {
    marginRight: px2dp(32) * 2,
  },
  items: {
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    height: px2dp(52) * 2,
  },
  fontSize14: {
    fontSize: px2dp(14) * 2,
    color: '#343332',
  },
  fontSizeGray14: {
    fontSize: px2dp(14) * 2,
    color: '#686764',
  },
  valueStyle: {
    color: '#CDCCC9',
  },
  btnTextStyle: {
    color: '#BA914A',
    fontSize: px2dp(14) * 2,
  },
  boxStyle: {
    width: px2dp(80) * 2,
    height: px2dp(28) * 2,
    borderColor: '#BA914A',
    borderWidth: px2dp(2),
    borderRadius: px2dp(4) * 2,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnTextBox: {
    marginRight: px2dp(32) * 2,
  },
  btnText: {
    fontSize: px2dp(28),
    color: fontColorCoffee,
  },
  banStyle: {
    left: px2dp(5),
    backgroundColor: '#F5F5F5',
    borderRadius: px2dp(4 * 2),
    paddingVertical: px2dp(2.5 * 2),
    paddingHorizontal: px2dp(6 * 2),
  },
  banTextStyle: {
    color: '#999793',
    fontSize: px2dp(12 * 2),
  },
});
